<template>
	<view class="content">

    <div class="views tabs">
      <div class="view view-main tab tab-active view-init" id="tab-1">
        <div class="page">
          <div class="navbar navbar-large">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="left" @click="to('/pages/profile/profile')">
                <a href="/settings/" class="link icon-only navbar-profile">
                  <img src="/static/img/avatars/small-avatar.jpg" alt="">
                </a>
              </div>
              <div class="title" style="margin-left: -50rpx">热门游戏</div>
<!--              <div class="title-large">-->
<!--                <div class="title-large-text">热门游戏</div>-->
<!--              </div>-->
              <div class="right">
                <a @click="to('/pages/create/post')" class="link icon-only">
                  <i class="icon f7-icons">
                    square_pencil

                  </i>
                </a>
              </div>
            </div>
          </div>

          <div class="page-content">
            <swiper-container class="full-width" slides-per-view="1.2" space-between="15" slides-offset-after="15"
                              slides-offset-before="15" speed="400">
              <swiper-slide>
                <a href="#" data-href="/single/" class="card">
                  <div class="card-image">
                    <img src="/static/img/cards/1.jpg" alt="">
                    <div class="card-image-footer">
                      <div class="card-category bg-color-white">Gaming</div>
                      <h2>The Exciting Future of Gaming Technology</h2>
                    </div>
                  </div>
                </a>
              </swiper-slide>
              <swiper-slide>
                <a href="#" data-href="/single/" class="card">
                  <div class="card-image">
                    <img src="/static/img/cards/2.jpg" alt="">
                    <div class="card-image-footer">
                      <div class="card-category bg-color-white">Movies</div>
                      <h2>A Guide to the Best Action Movies of All Time</h2>
                    </div>
                  </div>
                </a>
              </swiper-slide>
              <swiper-slide>
                <a href="#" data-href="/single/" class="card">
                  <div class="card-image">
                    <img src="/static/img/cards/3.jpg" alt="">
                    <div class="card-image-footer">
                      <div class="card-category bg-color-white">Food</div>
                      <h2>The Evolution of Burgers: From Classics to Innovative Creations</h2>
                    </div>
                  </div>
                </a>
              </swiper-slide>
            </swiper-container>

            <div class="section-title">今日推荐</div>
            <swiper-container class="full-width" slides-per-view="2.4" space-between="15" slides-offset-after="15"
                              slides-offset-before="15" speed="400">
              <swiper-slide @click="to('/pages/detail/games')">
                <a href="#" data-href="/movie/" class="card card-movie">
                  <div class="card-image">
                    <img src="/static/img/movies/1.jpg" alt="">
                    <div class="card-movie-rating">
                      <i class="icon f7-icons text-color-yellow">star_fill</i>
                      4.8/5
                    </div>
                  </div>
                </a>
              </swiper-slide>
              <swiper-slide>
                <a href="#" data-href="/movie/" class="card card-movie">
                  <div class="card-image">
                    <img src="/static/img/movies/2.jpg" alt="">
                    <div class="card-movie-rating">
                      <i class="icon f7-icons text-color-yellow">star_fill</i>
                      4.3/5
                    </div>
                  </div>
                </a>
              </swiper-slide>
              <swiper-slide>
                <a href="#" data-href="/movie/" class="card card-movie">
                  <div class="card-image">
                    <img src="/static/img/movies/3.jpg" alt="">
                    <div class="card-movie-rating">
                      <i class="icon f7-icons text-color-yellow">star_fill</i>
                      4.1/5
                    </div>
                  </div>
                </a>
              </swiper-slide>
              <swiper-slide>
                <a href="#" data-href="/movie/" class="card card-movie">
                  <div class="card-image">
                    <img src="/static/img/movies/4.jpg" alt="">
                    <div class="card-movie-rating">
                      <i class="icon f7-icons text-color-yellow">star_fill</i>
                      4.5/5
                    </div>
                  </div>
                </a>
              </swiper-slide>
            </swiper-container>
            <div class="section-title">
              最新发布
              <a  class="link" @click="to('/pages/list/newGame')">View All</a>
            </div>
            <div class="list detailed-list list-dividers full-width">
              <ul>
                <li>
                  <a href="#" class="item-link item-content">
                    <div class="item-media"><img src="/static/img/events/1.jpg" class="event-thumbnail" alt=""></div>
                    <div class="item-inner">
                      <div class="item-title">
                        <div class="item-name">Art Exhibition</div>
                        <div class="item-footer">Museum of Art, New York City</div>
                      </div>
                      <div class="item-after"><span class="badge color-dark">9:00 AM</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="item-link item-content">
                    <div class="item-media"><img src="/static/img/events/2.jpg" class="event-thumbnail" alt=""></div>
                    <div class="item-inner">
                      <div class="item-title">
                        <div class="item-name">Jay-Z Concert</div>
                        <div class="item-footer">Staples Center, Los Angeles</div>
                      </div>
                      <div class="item-after"><span class="badge color-dark">4:00 PM</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="item-link item-content">
                    <div class="item-media"><img src="/static/img/events/3.jpg" class="event-thumbnail" alt=""></div>
                    <div class="item-inner">
                      <div class="item-title">
                        <div class="item-name">Comedy Show</div>
                        <div class="item-footer">The Laugh Club, Chicago</div>
                      </div>
                      <div class="item-after"><span class="badge color-dark">6:30 PM</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="item-link item-content">
                    <div class="item-media"><img src="/static/img/events/4.jpg" class="event-thumbnail" alt=""></div>
                    <div class="item-inner">
                      <div class="item-title">
                        <div class="item-name">Dance Performance</div>
                        <div class="item-footer">Opera House, Sydney</div>
                      </div>
                      <div class="item-after"><span class="badge color-dark">8:00 PM</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="item-link item-content">
                    <div class="item-media"><img src="/static/img/events/5.jpg" class="event-thumbnail" alt=""></div>
                    <div class="item-inner">
                      <div class="item-title">
                        <div class="item-name">Hard Rock Concert</div>
                        <div class="item-footer">O2 Arena, London</div>
                      </div>
                      <div class="item-after"><span class="badge color-dark">9:30 PM</span>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>



            <div class="section-title">
              游戏测评
              <a  class="link" @click="to('/pages/list/postGame')">View All</a>
            </div>
            <div class="post-list">
              <a href="/single/" class="link post-horizontal">
                <div class="infos">
                  <div class="post-category">Science</div>
                  <div class="post-title">Unveiling the Science Behind Catchy Songs and Melodic
                    Allure</div>
                  <div class="post-date">30 minutes ago</div>
                </div>
                <div class="post-image"><img src="/static/img/post-list/11.jpg" alt=""></div>
              </a>
              <a href="/single/" class="link post-horizontal">
                <div class="infos">
                  <div class="post-category">Music</div>
                  <div class="post-title">Exploring the Evolution of Music Genres: From Past to
                    Present</div>
                  <div class="post-date">5 days ago</div>
                </div>
                <div class="post-image"><img src="/static/img/post-list/12.jpg" alt=""></div>
              </a>
              <a href="/single/" class="link post-horizontal">
                <div class="infos">
                  <div class="post-category">Music</div>
                  <div class="post-title">The Profound Impact of Music on the Brain Unveiled</div>
                  <div class="post-date">1 week ago</div>
                </div>
                <div class="post-image"><img src="/static/img/post-list/13.jpg" alt=""></div>
              </a>
            </div>
          </div>
        </div>
      </div>

    </div>

    <animationTabbar :active-index="0"></animationTabbar>
	</view>
</template>

<script setup lang="ts">
	import {
		counterStore
	} from '../../store/counter.js'
	import { ref, getCurrentInstance } from 'vue'
	import { onShow } from '@dcloudio/uni-app'

  import animationTabbar from "@/uni_modules/animation-tabbar/components/animation-tabbar/animation-tabbar.vue";
	import { showToast } from 'vant';

	import type { ComponentInternalInstance } from 'vue'
	const { proxy } = getCurrentInstance() as ComponentInternalInstance

	const counter = counterStore()
	const handleAdd = async () => {
		counter.increment()
		// 使用默认的loading
		const response = await proxy?.$http.get('/auth/tenant/list')
		// 自定义的loading
		const response1 = await proxy?.$http.get('/auth/tenant/list',null,null,'loading')
		console.log("response", response)
	}
	const url = process.env.VUE_APP_TEST
	const title = ref<String>('标题')
	onShow(() => {
		// console.log('onShow')
		// console.log(proxy)

	})

  function to(path){
    uni.navigateTo({
      url: path,
    });
  }
	// const date = ref('');
	// const show = ref(false);

	// const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
	// const onConfirm = (value) => {
	// 	show.value = false;
	// 	date.value = formatDate(value);
	// };
	const show = ref(false);
	const showPopup = () => {
		show.value = true;
	};
</script>

<style scoped>
	.content {
	  height: 100vh;
	}


</style>